<template>
  <div>
    <ul class="clearfix">
      <li
        v-for="article in articles"
        :key="article.articleId"
        class="TshareItem fl"
      >
        <h3 class="itemTitle">{{ article.title }}</h3>
        <p class="showTwoLine">
          {{ article.summary }}
        </p>
        <div class="clearfix">
          <span class="techerTag fl">{{ article.nickName }}</span>
          <span class="techerTag fr">副教授</span>
        </div>
        <i class="iconfont icon-mianxing-dianzan fl thumb"></i
        ><span class="fl smallWord">{{ article.goodCount }}</span>
        <span class="fr smallWord">{{ article.readCount }}浏览</span>
      </li>
    </ul>
    <div class="mauto">
      <el-pagination
        :current-page="currentPage"
        :total="totalRecords"
        :page-size="limit"
        :page-sizes="[6, 12, 18, 24, 28, 36, 42]"
        style="margin: 30px 0; text-align: center"
        layout="sizes,prev,pager,next,jumper,->,total,slot"
        @current-change="changeCurrentPage"
        @size-change="changeSize"
      />
    </div>
  </div>
</template>

<script>
import searchApi from "@/api/searchApi";
export default {
  name: "tshare",
  data() {
    return {
      currentPage: 1,
      totalRecords: 100,
      limit: 6,
      articles: [
        {
          identity: 1,
          articleId: "f9xkyY6K6mZZ41G",
          pBoardId: 10000,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "条件渲染",
          tag: ["前端"],
          content:
            '<p data-v-md-line="1">条件渲染</p>\r\n<h1 data-v-md-heading="v-if" data-v-md-line="2">v-if</h1>\r\n<p data-v-md-line="3">指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。</p>\r\n<div data-v-md-line="4"><div class="v-md-pre-wrapper v-md-pre-wrapper-js extra-class"><pre class="v-md-hljs-js"><code>&lt;h1 v-<span class="hljs-keyword">if</span>=<span class="hljs-string">&quot;awesome&quot;</span>&gt;Vue is awesome!&lt;/h1&gt;\r\n</code></pre>\r\n</div></div><h1 data-v-md-heading="v-else" data-v-md-line="7">v-else</h1>\r\n<p data-v-md-line="8">你也可以使用 v-else 为 v-if 添加一个“else 区块”。</p>\r\n<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-js extra-class"><pre class="v-md-hljs-js"><code>&lt;button @click=<span class="hljs-string">&quot;awesome = !awesome&quot;</span>&gt;Toggle&lt;/button&gt;\r\n\r\n<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;awesome&quot;</span>&gt;</span>Vue is awesome!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>\r\n<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">v-else</span>&gt;</span>Oh no ?<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>\r\n</code></pre>\r\n</div></div>',
          summary:
            "令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。",
          postTime: "2023-01-16T09:55:37.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 1,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10002,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10003,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10004,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
      ],
    };
  },
  mounted() {},
  created() {
    this.search();
  },
  methods: {
    toLookPost() {
      this.$router.push({
        name: "lookpost",
      });
    },
    changeSize(size) {
      this.limit = size;
      this.search();
    },
    changeCurrentPage(currentPage) {
      this.changeCurrentPage = currentPage;
      this.search();
    },
    search() {
      var title = sessionStorage.getItem("searchInput");
      var pBoardId = sessionStorage.getItem("pBoardId");
      var findType = sessionStorage.getItem("findType");
      if (title == null || title == "") {
        title = "";
      }
      if (pBoardId == null || pBoardId == "") {
        pBoardId = 0;
      }
      if (findType == null || findType == "") {
        findType = 0;
      }
      this.selectBoardEssay(
        title,
        findType,
        this.currentPage,
        this.limit,
        pBoardId
      );
    },
    selectBoardEssay(title, findType, pageNum, pageSize, pBoardId) {
      searchApi
        .selectBoardEssay(title, findType, pageNum, pageSize, pBoardId)
        .then((response) => {
          this.articles = response.data.records;
          this.totalRecords = response.data.size;
        });
    },
  },
};
</script>

<style>
.TshareItem {
  height: 190px;
  width: 191px;
  margin: 20px 0 20px 65px;
  padding: 15px;
  /* border: 1px solid rgba(0, 0, 0, 0.2); */
  background: url("./images/document.png");
  background-size: 191px;

  /* background-color: pink; */
}
.itemTitle {
  font-weight: normal;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.showTwoLine {
  margin: 10px 0 10px 0;
  color: #97a3ad;
  /* 主要代码 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;

  /* 几行后显示省略号 */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.techerTag {
  color: rgba(0, 0, 0, 0.4);
  font-size: 10px;
  padding: 1px 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  margin-bottom: 20px;
}
.smallWord {
  color: rgba(0, 0, 0, 0.4);
  font-size: 13px;
  line-height: 20px;
}
.thumb {
  color: #fc5531;
}
.thumb:hover {
  cursor: pointer;
}

.mauto {
  margin: 0 auto;
  width: 60%;
}
</style>
